<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-yellow" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">
					<p style="font-weight: 600;">得失记录</p>
				</block>
			</cu-custom>
			<view>
				<view class="flex solid-bottom padding-top-lg justify-between bg-white">
					<text class="text-sm padding-sm">共计 100 条</text>
					<view class="padding-sm">
						<button class="cu-btn block line-green sm padding-sm" @tap="showModal" data-target="DrawerModalR">
							<text class="cuIcon-filter"></text> 筛选
						</button>
					</view>
				</view>
			</view>
			<view class="home-bottom">
				<view>
					<view class="cu-list menu sm-border">
						<view class="cu-item">
							<view style="width: 100%;">
								<view class="flex solid-bottom padding-lg justify-between bg-white">
									<view class="cu-avatar lg radius bg-gray" :style="avatarUrl">
										<view class="cu-tag badge bg-red">iu</view>
									</view>
									<view class="padding-sm">
										给<text style="font-weight: 600;" class="text-xxl">10</text>分
									</view>
									<view class="cu-avatar lg radius bg-gray" :style="avatarUrl">
										<view class="cu-tag badge bg-green">love</view>
									</view>
								</view>
							</view>
						</view>
						<view class="cu-item">
							<view style="width: 100%;">
								<view class="flex solid-bottom padding-lg justify-between bg-white">
									<view class="cu-avatar lg radius bg-gray" :style="avatarUrl">
										<view class="cu-tag badge bg-red">iu</view>
									</view>
									<view class="padding-sm">
										给<text style="font-weight: 600;" class="text-xxl">10</text>分
									</view>
									<view class="cu-avatar lg radius bg-gray" :style="avatarUrl">
										<view class="cu-tag badge bg-green">love</view>
									</view>
								</view>
							</view>
						</view>
						<view class="cu-item">
							<view style="width: 100%;">
								<view class="flex solid-bottom padding-lg justify-between bg-white">
									<view class="cu-avatar lg radius" :style="avatarUrl">
										<view class="cu-tag badge bg-red">iu</view>
									</view>
									<view class="padding-sm">
										给<text style="font-weight: 600;" class="text-xxl">10</text>分
									</view>
									<view class="cu-avatar lg radius" :style="avatarUrl">
										<view class="cu-tag badge bg-green">love</view>
									</view>
								</view>
							</view>
						</view>
						<view class="cu-item">
							<view style="width: 100%;">
								<view class="flex solid-bottom padding-lg justify-between bg-white">
									<view class="cu-avatar lg radius" :style="avatarUrl">
										<view class="cu-tag badge bg-red">iu</view>
									</view>
									<view class="padding-sm">
										给<text style="font-weight: 600;" class="text-xxl">10</text>分
									</view>
									<view class="cu-avatar lg radius" :style="avatarUrl">
										<view class="cu-tag badge bg-green">love</view>
									</view>
								</view>
							</view>
						</view>
						<view class="cu-item">
							<view style="width: 100%;">
								<view class="flex solid-bottom padding-lg justify-between bg-white">
									<view class="cu-avatar lg radius" :style="avatarUrl">
										<view class="cu-tag badge bg-red">iu</view>
									</view>
									<view class="padding-sm">
										给<text style="font-weight: 600;" class="text-xxl">10</text>分
									</view>
									<view class="cu-avatar lg radius" :style="avatarUrl">
										<view class="cu-tag badge bg-green">love</view>
									</view>
								</view>
							</view>
						</view>
						<view class="cu-item">
							<view style="width: 100%;">
								<view class="flex solid-bottom padding-lg justify-between bg-white">
									<view class="cu-avatar lg radius" :style="avatarUrl">
										<view class="cu-tag badge bg-red">iu</view>
									</view>
									<view class="padding-sm">
										给<text style="font-weight: 600;" class="text-xxl">10</text>分
									</view>
									<view class="cu-avatar lg radius" :style="avatarUrl">
										<view class="cu-tag badge bg-green">love</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="cu-modal drawer-modal justify-end" :class="modalName=='DrawerModalR'?'show':''" @tap="hideModal">
			<view class="bg-white cu-dialog basis-lg container" @tap.stop="" >
				<view style="padding-top:85px">
					<view class="cu-bar bg-white solid-bottom">
						<view class="action">
							<text class="cuIcon-title text-red "></text> 收分人
						</view>
					</view>
					<view class="bg-white">
						<view :class="avatarCheck==true?'cover':null" class="cu-avatar radius margin-right-lg" :style="avatarUrl1" @click="userCheck()">
							 <view class="cu-tag badge bg-orange">iu</view>
						</view>
						<view class="cu-avatar radius bg-gray margin-right-lg" :style="avatarUrl">
						     <view class="cu-tag badge bg-orange">やれ</view>
						</view>
						<view class="cu-avatar radius bg-gray margin-right-lg" :style="avatarUrl">
						    <view class="cu-tag badge bg-orange">love</view>
						</view>
						<view class="cu-avatar radius bg-gray margin-right-lg" :style="avatarUrl">
						    <view class="cu-tag badge bg-orange">冰</view>
						</view>
					</view>
				</view>
				<view>
					<view class="cu-bar bg-white solid-bottom">
						<view class="action">
							<text class="cuIcon-title text-green "></text> 给分人
						</view>
					</view>
					<view class="bg-white">
						<view class="cu-avatar radius bg-gray margin-right-lg" :style="avatarUrl">
							 <view class="cu-tag badge bg-orange">iu</view>
						</view>
						<view class="cu-avatar radius bg-gray margin-right-lg" :style="avatarUrl">
						     <view class="cu-tag badge bg-orange">やれ</view>
						</view>
						<view class="cu-avatar radius bg-gray margin-right-lg" :style="avatarUrl">
						    <view class="cu-tag badge bg-orange">love</view>
						</view>
						<view class="cu-avatar radius bg-gray margin-right-lg" :style="avatarUrl">
						    <view class="cu-tag badge bg-orange">冰</view>
						</view>
					</view>
				</view>
				<view>
					<view class="cu-bar bg-white solid-bottom">
						<view class="action">
							<text class="cuIcon-title text-blue "></text> 分数
						</view>
					</view>
					<view class="bg-white padding-sm">
						<input maxlength="10" class="padding-sm" type="number" placeholder="输入分数" style="text-align: left;width: 160px;border: 1px solid grey;height: 40px;border-radius:5px" name="input"></input>
					</view>
				</view>
				<view class="bottom-div">
					<view class="flex solid-bottom padding justify-between">
					    <button class="cu-btn line-grey">重 置</button>
					    <button class="cu-btn bg-green">确 定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: null,
				gridCol: 4,
				gridBorder: false,
				avatarUrl1: "background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)",
				avatarCheck:false,
				avatarUrl: "background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)",
				myValue: null,
				arrValue: []
			}
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.arrValue=[];
				this.myValue=null;
				this.modalName = null;
			},
			userCheck(){
				if(this.avatarCheck==true)
				{
					this.avatarUrl1="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)";
					this.avatarCheck=false;
				}
				else{
					this.avatarUrl1="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg)";
					this.avatarCheck=true;
				}
				
			}
		}
	}
</script>

<style>
	.home-bottom {
		padding-bottom: 140rpx;
	}
	.container {
	  position: relative;
	}
	.bottom-div {
	  position: absolute;
	  bottom: 0;
	  width: 100%;
	}
	.cover{
		background-color: black;
		opacity:0.6; filter: alpha(opacity=60)
	}
</style>